<template>
  <div>
    <div>
     
    <el-date-picker value-format="yyyy"
      @change="ss"
      v-model="yuefen"
      type="year"
      placeholder="选择年">
    </el-date-picker>


      <el-select @change="suoyou()" v-model="value" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>

    <div id="myChart" :style="{ width: '100%', height: '500px' }" />
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      yuefen: "",
      options: [
        {
          value: "选项1",
          label: "新增会员",
        },
        {
          value: "选项2",
          label: "今日登录人数",
        },
        {
          value: "选项3",
          label: "预约人数",
        },
        {
          value: "选项4",
          label: "报告上传",
        },
      ],
      value: "",
      dada1: [],
      dada2: [],
    };
  },
  mounted() {
      this.Logtoday()
  },
  methods: {
    ss(){
 if(this.value=="选项1"){
         this.xinzeng();
       }else if(this.value=="选项3"){
         this.yuyue()
       }else if(this.value=="选项4"){
         this.shangchuan()
       }
    },
    suoyou(){
       if(this.value=="选项1"){
            this.yuefen=""
         this.xinzeng();
       }else if(this.value=="选项3"){
         this.yuefen=""
         this.yuyue()
       }else if(this.value=="选项4"){
            this.yuefen=""
         this.shangchuan()
       }else if(this.value=="选项2"){
         this.Logtoday()
       }
    },
    xinzeng() {
     if(this.yuefen!=null){
      
      const myChart = this.$echarts.init(document.getElementById("myChart"));

      axios.get("/api/selectAllYuefen?fen="+this.yuefen).then(data => {
        console.log(data)
        let aa=[];
        let bb=[];
        data.data.forEach((element) => {
          aa.push(element.kk);
          bb.push(element.dd);
        });
        myChart.setOption({
          title: {
            text: "新增会员",
          },
          tooltip: {},
          legend: {},
          grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
      },
          xAxis: {
            data: aa,
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: bb,
            },
          ],
        });
      });
      }
    },
    yuyue(){
      if(this.yuefen!=null){
      const myChart = this.$echarts.init(document.getElementById("myChart"));
      axios.get("/api/selectToderfenlei?id="+this.yuefen).then(data => {
        console.log(data)
        let aa=[];
        let bb=[];
        data.data.forEach((element) => {
          aa.push(element.yuyue1);
          bb.push(element.yuyue2);
        });
        myChart.setOption({
          title: {
            text: "预约人数",
          },
          tooltip: {},
          legend: {},
          grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
      },
          xAxis: {
            data: aa,
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: bb,
            },
          ],
        });
      });
      }
    },
    shangchuan() {
     if(this.yuefen!=null){
      const myChart = this.$echarts.init(document.getElementById("myChart"));

      axios.get("/api/shangchuanByAll?id="+this.yuefen).then(data => {
        console.log(data)
        let aa=[];
        let bb=[];
        data.data.forEach((element) => {
          aa.push(element.shangc1);
          bb.push(element.shangc2);
        });
        myChart.setOption({
          title: {
            text: "报告上传",
          },
          tooltip: {},
          legend: {},
          grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
      },
          xAxis: {
            data: aa,
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: bb,
            },
          ],
        });
      });
      }
    },
       Logtoday() {
     if(this.yuefen!=null){
      
      const myChart = this.$echarts.init(document.getElementById("myChart"));

      axios.get("/api/logtodayByAll").then(data => {
        let bb=[];
        data.data.forEach((element) => {
          bb.push(element.logtoday2);
        });
        let ss = 1048-bb;
        myChart.setOption({
            title: {
            text: "今日登录人数",
          },
        
           tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  
    
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },

    
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      
      data: [
       
        { value: ss, name: '' },
        { value: bb, name: '今日登录人数' },
     
      ]
      
    }
  ]
        });
      });
      }
    }
  },
};
</script>
